<template>
    <section class="modlude">
        <el-form :inline="true" :model="formSearch" class="form_inline" label-width="90px">
            <!-- <el-form-item label="所属组织" size="small">
                <el-cascader ref="cascader" v-model="option1" :options="dataTree" :props="defaultProps2"
                    @change="handleChange" clearable>
                </el-cascader>
            </el-form-item>
            <el-form-item label="选择项目" size="small">
                <el-select v-model="formSearch.projectId" placeholder="请选择项目">
                    <el-option v-for="(item, index) in xqTree" :label="item.name" :value="item.id" :key="index">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="所属系统" class="devForm" size="small">
                <el-select v-model="formSearch.subsystemCode" clearable @change="changeSelect" placeholder="请选择系统">
                    <el-option v-for="item in subsystemList" :key="item.keyId" :label="item.systemType"
                        :value="item.keyId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属设备" size="small" prop="deviceId">
                <el-select v-model="formSearch.deviceId" filterable clearable placeholder="请选择设备">
                    <el-option v-for="item in devList" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="操作人账号" size="small">
                <el-input v-model="formSearch.account" placeholder="请输入操作人账号"></el-input>
            </el-form-item>
            <el-form-item label="操作菜单" size="small">
                <el-input v-model="formSearch.label" placeholder="请输入操作菜单"></el-input>
            </el-form-item> -->
            <el-form-item label="操作时间" size="small">
                <el-date-picker v-model="formSearch.page.startTime" type="datetime" value-format="timestamp"
                    placeholder="开始时间">
                </el-date-picker>
                <span style="color:#a1d6f4;"> -- </span>
                <el-date-picker v-model="formSearch.page.endTime" type="datetime" value-format="timestamp"
                    placeholder="结束时间">
                </el-date-picker>
            </el-form-item>
            <!-- v-if="$root.btnControl.find(item => item == 'view')" -->
            <el-form-item size="small">
                <el-button size="small" @click="getlist">查 询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="formData" style="width: 100%" stripe>
            <!-- <el-table-column prop="account" label="操作人账号"></el-table-column> -->
            <el-table-column prop="deviceName" label="设备名称"></el-table-column>
            <el-table-column prop="pointName" label="点位"></el-table-column>
            <el-table-column prop="subsystemCode" label="所属系统"></el-table-column>
            <el-table-column label="报警类型" prop="type">
                <!-- <template slot-scope="scope">
                    {{
                    scope.row.optType == 1
                    ? "增加"
                    : scope.row.optType == 2
                    ? "删除"
                    : scope.row.optType == 3
                    ? "修改":scope.row.optType == 4
                    ?"登录":"退出登录"
                    }}
                </template> -->
            </el-table-column>
            <el-table-column prop="content" :show-overflow-tooltip="true" label="报警内容" width="150px"></el-table-column>

            <el-table-column label="报警时间">
                <template slot-scope="scope" v-if="scope.row.originTime">
                    {{ $root.getDateArray(scope.row.originTime)[9] }}
                </template>
            </el-table-column>
            <el-table-column label="是否处理" prop="type">
                <template slot-scope="scope">
                    {{scope.row.confirm==false?'未确认':scope.row.confirm==true?'已确认':''}}
                </template>
            </el-table-column>
            <el-table-column prop="confirmTime" label="确认时间">
                <template slot-scope="scope" v-if="scope.row.confirmTime">
                    {{ $root.getDateArray(scope.row.confirmTime)[9] }}
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width=200>
                <template slot-scope="scope">
                    <el-dropdown size="small" v-if="scope.row.confirm==false">
                        <el-button type="" size="small">
                            确认<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="eventConfirmOperation(scope.row,false)">确认当前报警记录</el-dropdown-item>
                            <el-dropdown-item @click.native="eventConfirmOperation(scope.row,true)">确认当前及以往报警记录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- <el-button type="" size="small" >确认</el-button> -->
                    <el-button type="" size="small" @click="xiangqing(scope.row)">定位</el-button>
                    <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
                    <!-- <el-button type="warning" size="small"  @click="backfill(scope.row,2)">修 改</el-button> -->

                </template>
            </el-table-column>
        </el-table>
        <paging @changePage="handleCurrentPage" :get-total="total"></paging>
    </section>
</template>

<script>
    import paging from "../paging";
    import { eventConfirm,iotdevicepage, eventDevice, xqSelectList, orgTree, systemList, spaceDeviceInfo } from "../../url/api";
    export default {
        data() {
            return {
                devList: [],
                subsystemList: [],
                option1: [],
                xqTree: [],
                isAddorUpdate: 1, //1添加、2修改
                formSearch: {
                    deviceId: '',
                    page: {
                        current: 1,
                        endTime: '',
                        size: 10,
                        startTime: ''
                    },
                    subsystemCode: '',
                },
                formData: [], //数据
                formUpdate: {}, //修改表单
                total: 0, //数据总数
                dataTree: [],
                defaultProps2: {
                    children: "children",
                    label: "name",
                    value: "id",
                    expandTrigger: "hover",
                    checkStrictly: true
                }
            };
        },
        methods: {
            eventConfirmOperation(row, status) {
                let params = {
                    confirm: row.confirm,
                    confirmTime:row.confirmTime,
                    content: row.content,
                    deviceId: row.deviceId,
                    originTime: row.originTime,
                    pointId: row.pointId,
                    subsystemCode: row.subsystemCode,
                    // timeOut: row.pointId,
                    // timeUnit: row.pointId,
                    type: row.type
                }
                let content = '该操作只确认当前报警记录是否确定？';
                if (status) {
                    params.id = row.id
                    content = "该操作将确认当前及以往报警记录是否确定？"
                }
                this.$confirm(content, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    eventConfirm(params).then(res => {
                    if (res.data.ok) {
                        this.$message({
                        type: 'success',
                        message: '操作成功'
                       });
                       this.getlist();
                    }else{
                        this.$message({
                        type: 'error',
                        message: '操作失败'
                       });
                    }
                });
                }).catch(() => {
                    console.log("取消");
                });
            },
            xiangqing(row) {
                console.log(row, "WWWWWWWWWWWWWWW");
                let data = null;
                let params = {
                    subsystemCode: row.subsystemCode,
                    deviceId: row.deviceId,
                }
                spaceDeviceInfo(params).then(res => {
                    //项目选择列表
                    console.log(res, "WQWQWQWQQWQWQWQWQ");
                    if (res.data.ok) {
                        data = res.data.data;
                    }
                    debugger
                    this.$router.push({
                        path: "/" + row.subsystemCode,
                        query: {
                            rowData: data,
                        },
                    });
                });

            },
            getlist() {
                eventDevice(this.formSearch).then(res => {
                    console.log(res);
                    if (res.data.ok) {
                        this.formData = res.data.data.records.filter(item => {
                            if (item.createTime) {
                                item.createTime = this.$root.getDateArray(item.createTime)[9];
                            }
                            return item;
                        });
                        this.total = res.data.data.total;
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            },
            getInit() {
                //初始化列表
                this.getlist();
                xqSelectList({}).then(res => {
                    //项目选择列表
                    console.log(res);
                    if (res.data.ok) {
                        this.xqTree = res.data.data;
                    }
                });
                let org_tree = {
                    name: "",
                    status: 1
                };
                orgTree(org_tree).then(res => {
                    //获取组织列表
                    console.log(res);
                    if (res.data.ok) {
                        this.dataTree = res.data.data;
                    }
                });
                systemList({}).then((res) => {
                    if (res.data.ok) {
                        this.subsystemList = res.data.data;
                        // this.subsystemCode = this.subsystemList[0].keyId;
                        // // //
                        // this.saveParams.subsystemList = this.subsystemList;
                    }
                });
                this.getDevList();

            },
            getDevList() {
                // const { deviceName, xqId } = this.formSearch;
                iotdevicepage({
                    current: 1,
                    size: 99999999,
                }).then(({ data }) => {
                    if (data.ok) {
                        this.devList = data.data.records;
                    }
                })
            },
            handleCurrentPage(val) {
                //页码改变
                this.formSearch.page.current = val;
                this.getlist();
            },
            changeSelect(value) {
                // if (value.length != 0) {
                //     console.log(value);
                //     this.formSearch.orgId = this.$refs.cascader.getCheckedNodes()[0].data.id;
                // } else {
                //     this.formSearch.orgId = "";
                // }
                // this.formSearch.
                eventDevice(this.formSearch).then(res => {
                    console.log(res);
                    if (res.data.ok) {
                        this.formData = res.data.data.records.filter(item => {
                            if (item.createTime) {
                                item.createTime = this.$root.getDateArray(item.gmtCreate)[9];
                            }
                            return item;
                        });
                        this.total = res.data.data.total;
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            }
        },
        mounted() {
            this.getInit();
        },
        components: {
            paging
        }
    };
</script>
<style scoped>
    .cont_box {
        width: 100%;
        display: flex;
    }

    .cont_box_left,
    .cont_box_right {
        flex: 1;
        background: transparent;
        padding: 10px;
    }

    .cont_box_left {
        margin-right: 10px;
    }

    .margin10 {
        margin-bottom: 10px;
    }

    .marginRight {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .cont_box_right .el-form-item {
        margin-bottom: 20px;
    }
</style>